<template>
  <div>
    <div :class="[showExpand?'search-title-more':'search-title']">查询条件</div>
    <div class="search-box">
      <a-form-model :model="searchForm" layout="inline" ref="searchForm" class="searchForm searchMoreForm" :style="{height:expanded? 'auto' : '40px'}">
        <a-row style="width: 100%">
          <a-col :xl="8" :xxl="6">
            <a-form-model-item label="母料编号"  prop="masterbatchCode">
              <a-input v-model="searchForm.masterbatchCode" :allowClear=true placeholder="请输入母料编号"/>
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :xxl="6">
            <a-form-model-item label="母料名称"  prop="masterbatchName">
              <a-tooltip placement="bottom" overlayClassName="tipMore">
                <template slot="title">
                  <div class="tip">
                    <a-input type="textarea" v-model="searchForm.masterbatchName" :allowClear=true :rows="5" style="max-height: 70px;width: 280px" placeholder="请输入母料名称"/>
                  </div>
                </template>
                <a-input v-model="searchForm.masterbatchName" :allowClear=true placeholder="请输入母料名称"/>
              </a-tooltip>
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :xxl="6">
            <a-form-model-item label="制单人"  prop="createBomUser">
              <a-input v-model="searchForm.createBomUser" :allowClear=true placeholder="请输入制单人"/>
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :xxl="6">
            <a-form-model-item label="制单时间" prop="createBomDatetimeValue">
              <a-range-picker
                v-model="searchForm.createBomDatetimeValue"
                style="width: 100%"
                @change="onChangeCreateBomDatetimeValue"
                valueFormat="YYYY-MM-DD"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <div class="searchButton">
        <a-button type="primary" v-if="QX.read" @click="getSearch">查询</a-button>
        <a-button type="default" v-if="QX.read" @click="restSearch">重置</a-button>
      </div>
      <div v-if="showExpand" class="expand" @click="switchHeight">
        <span v-if="expanded==true">收起<a-icon type="up" /></span>
        <span v-else>展开<a-icon type="down" /></span>
      </div>
    </div>
    <div class="table-operation">
      <a-button v-if="QX.syncData" type="primary" @click="syncData" icon="sync" :loading="syncloading">数据同步</a-button>
      <span class="syncDatetime">当前最近一次同步时间：{{syncDatetime}}</span>
    </div>
    <a-table
      rowKey="bomId"
      :columns="columns"
      :data-source="dataList"
      :pagination="false"
      :scroll="{x: 1000,y: scrollY }"
      :loading="loading">
      <template
        v-for="col in columns"
        :slot="col.key"
        slot-scope="text,record"
      >
        <span v-if="col.key=='action'">
          <a @click="detail(record)" v-if="QX.read"><a-icon class="iconBtn" type="eye"/>详情</a>
        </span>
        <span v-else>
          <TableTootip :content="text"></TableTootip>
        </span>
      </template>
    </a-table>

    <a-pagination
      show-size-changer
      :total="totalPage"
      :current="pageIndex"
      :pageSize="pageSize"
      @change="onChangePage"
      @showSizeChange="onShowSizeChange"
      style="float: right;margin-top: 15px"
    />
    <a-drawer
      :title="title"
      :width="drawerWith"
      :visible="visibleDetail"
      :closable="true"
      @close="visibleDetail=!visibleDetail">
      <BomDetail :bomId="bomId"></BomDetail>
    </a-drawer>
  </div>

</template>

<script>
import { req } from '../../../api/axiosFun';
import preventBack from 'vue-prevent-browser-back';
import AddBom from './AddBom.vue'
import BomDetail from './BomDetail.vue'
import TableTootip from '../../../components/TableTootip.vue'
import {drawerWith, getScrollY, timeNow} from "../../../until";
export default {
  name: "Bom",
  mixins: [preventBack],//注入
  components:{
    AddBom,
    BomDetail,
    TableTootip
  },
  data() {
    return {
      title: '',
      QX: {},
      labelCol: {span: 5},
      wrapperCol: {span: 18},
      syncloading:false,
      showExpand: false,
      expanded: false,//筛选条件是否展开
      searchForm: {
        masterbatchCode:'',
        masterbatchName:'',
        createBomDatetimeValue: [],
        createBomDatetimeStart:'',
        createBomDatetimeStop:'',
        createBomUser: '',
      },
      dataList: [],
      columns,
      loading: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      disabled: false,
      bomId: '',
      updateUser: '002',
      visible: false,
      visibleDetail: false,
      drawerWith: 0,
      scrollY: 0,
      syncDatetime:''//当前最近一次同步时间
    }
  },
  mounted() {
    this.showExpand = document.body.clientWidth <= 1440
    this.drawerWith = drawerWith()
    window.onresize = () => {
      //屏幕尺寸变化
      return (() => {
        this.drawerWith = drawerWith()
        this.showExpand = document.body.clientWidth <= 1440
      })()
    }
    this.getBomlistPage();
    setTimeout(()=>{
      this.scrollY = getScrollY(this.$refs.searchForm.$el.offsetHeight,280)
    },0)
  },
  methods: {
    switchHeight(){//切换查询条件高度
      this.expanded=!this.expanded
      setTimeout(()=>{
        this.scrollY = getScrollY(this.$refs.searchForm.$el.offsetHeight,280)
      },0)
    },
    onChangeCreateBomDatetimeValue(date) {
      if(date.length) {
        this.searchForm.createBomDatetimeStart = date[0]
        this.searchForm.createBomDatetimeStop = date[1]
      }else {
        this.searchForm.createBomDatetimeStart = ''
        this.searchForm.createBomDatetimeStop = ''
      }
    },
//查询
    getSearch() {
      this.pageIndex = 1
      this.getBomlistPage()
    },
    /* 重置查询 */
    restSearch() {
      this.searchForm.createBomDatetimeStart = ''
      this.searchForm.createBomDatetimeStop = ''
      this.restForm('searchForm');
      this.pageIndex = 1
      this.getBomlistPage();
    },
    /* 重置表单 */
    restForm(form) {
      this.$refs[form].resetFields();
    },
    /* 改变页数事件 */
    onChangePage(page, pageSize) {
      this.pageIndex = page;
      this.getBomlistPage();
    },
    /* 改变每页显示条数 */
    onShowSizeChange(current, pageSize) {
      this.pageIndex = 1;
      this.pageSize = pageSize;
      this.getBomlistPage();
    },
    /* 列表 */
    getBomlistPage() {
      this.loading = true;
      this.searchForm.page = this.pageIndex;
      this.searchForm.rows = this.pageSize;
      var searchForm = {}
      for (var key in this.searchForm) {
        searchForm[key] = this.searchForm[key]||''
      }
      req('post', `Bom/getBomlistPage`, searchForm)
        .then(res => {
          if (res.result === 'success') {
            this.dataList = res.data;
            this.totalPage = res.page.totalResult;
            this.QX = res.QX;
            this.syncDatetime = res.syncDatetime || timeNow()
          }
          this.loading = false;
          this.syncloading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    detail(record) {
      this.loading = true
      req("post", 'Bom/getBomById', {
        bomId:record.bomId
      }).then(res => {
        this.loading = false
        if (res.result === 'success') {
          this.title='详情'
          this.visibleDetail = true
          this.bomId = record.bomId
        }
      });
    },
    syncData(){
      this.syncloading = true
      this.loading = true
      req('post', '/Bom/syncERPBomData', {})
        .then(res => {
          if (res.result === 'success') {
            this.getSearch();
          }
          this.loading = false
        });
    }
  }
}
const columns = [
  {
    title: '序号',
    align: 'center',
    width: '40px',
    customRender: (text, record, index) => `${index + 1}`,
  },
  {
    title: '母料编码',
    align: 'center',
    dataIndex: 'masterbatchCode',
    key: 'masterbatchCode',
    scopedSlots: {customRender: 'masterbatchCode'},
    width: '80px',
  },
  {
    title: '母料名称',
    align: 'left',
    dataIndex: 'masterbatchName',
    key: 'masterbatchName',
    width: '270px',
    scopedSlots: {customRender: 'masterbatchName'},
  },
  {
    title: '规格型号',
    align: 'center',
    dataIndex: 'masterbatchModel',
    key: 'masterbatchModel',
    width: '90px',
    scopedSlots: {customRender: 'masterbatchModel'},
  },
  {
    title: '计量单位',
    align: 'center',
    dataIndex: 'masterbatchCompany',
    key: 'masterbatchCompany',
    scopedSlots: {customRender: 'masterbatchCompany'},
    width: '60px',
  },
  {
    title: '版本号',
    align: 'center',
    dataIndex: 'version',
    key: 'version',
    scopedSlots: {customRender: 'version'},
    width: '60px'
  },
  {
    title: '版本说明',
    align: 'left',
    dataIndex: 'versionMemo',
    key: 'versionMemo',
    width: '140px',
    scopedSlots: {customRender: 'versionMemo'},
  },
  {
    title: '制单人',
    dataIndex: 'createBomUser',
    align: 'center',
    key: 'createBomUser',
    scopedSlots: {customRender: 'createBomUser'},
    width: '60px'
  },{
    title: '制单时间',
    dataIndex: 'createBomDatetime',
    align: 'center',
    key: 'createBomDatetime',
    scopedSlots: {customRender: 'createBomDatetime'},
    width: '140px'
  },{
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    fixed: 'right',
    align: 'center',
    width: 80,
    scopedSlots: {customRender: 'action'},
  },
];
</script>

<style scoped>
@import "../../../assets/css/maincss.css";
.syncDatetime {
  color: #666;
  margin-left: 10px;
  font-size: 14px;
}
</style>
